<template>
  <div>
    <div class="title"><image src="/static/search.svg" class="search" mode="widthFix" /><image src="/static/furhter_logo.svg" class="logo" mode="widthFix" /></div>
    
    <div class="top"><span>视频</span><i></i><p>一句话介绍「视频」的内容一句话介绍「视频」的内容</p></div>

    <div class="box">
      <div class="box_main"><img src="/static/fm2.jpg" mode="widthFix" class="box_img"><img src="/static/play.svg" mode="widthFix" class="box_play"><span><b>封面故事 | 视频</b><i></i></span><em>吃鸡为什么流行？</em></div>
      <img src="/static/corner_button.svg" mode="widthFix" class="box_bt">
      <div class="box_more">13 条新故事</div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
  },

  methods: {
  }
}
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.search{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.top{width: 100%; height: auto; display: block; float: left; margin:80px 0 10px; font-size: 30px; color: #000000; text-align: center;}
.top span{width: 100%; height: auto; display: block; float: left;margin: 0 0 15px;font-family: Source Han Serif SC; }
.top i{width: 24px; height: 2px; display: block; float: left; background: #F62525; margin: 0 175.5px 18px}
.top p{width: 240px; height: auto; display: block; float: left;  line-height: 22px; color: rgba(0,0,0,.4); font-size: 14px;font-family: PingFang SC;margin: 0 67.5px 0px }
.box{width: 100%; height: auto; display: block; float: left;margin:23px 0 0; }
.box_main{width: 327px; height: 412px; display: block; float: left; position: relative; margin: 0 0 0 24px; overflow: hidden;}
.box_main .box_img{ width: 100%; height: auto; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 1;}
.box_main span{ width: 285px; height: 17px; line-height: 17px; font-size: 12px; color: #FFFFFF; position: absolute; top: 330px; left: 20px; z-index: 1;display: block; float: left; z-index: 2;}
.box_main span b{display:block;  float: left;}
.box_main span i{ width: 48px; height: 1px; background: #ffffff; display:block; margin: 8px 0 0 5px; float: left;}
.box_main em{ width: 285px; height: 24px; line-height: 24px; font-size: 20px; color: #FFFFFF; position: absolute; top: 358px; left: 20px; z-index: 1;display: block; float: left;z-index: 2;}
.box_bt{width: 90px; height: 90px; display: block; float: right;position: relative; margin:-65px 0 0 -24px; z-index: 3;}
.box_more{width: 100%; height: 20px; display: block; float: left; text-align: center; font-size: 10px; color: rgba(0,0,0,.6);margin: -20px 0 0;}
.box_play{width:53px; height: 53px; position: absolute; z-index: 2; top:180px; left: 130px;}
</style>